<template>
  <div class="main_spac1">
    <div class="main_white padding10 paddingTop0">
      <div class="main_ti box">
        <el-tabs v-model="activeName" @tab-click="handleClick" class="box">
          <el-tab-pane
            v-for="item in categoryList_first"
            :key="item.id"
            :label="item.name"
            :name="String(item.id)"
          ></el-tab-pane>
        </el-tabs>
      </div>
      <div class="main_container" v-loading="listLoading">
        <div class="container">
          <div class="header">
            <div class="header-left">{{ title }}（共{{ totalCount }}张）</div>
            <div class="header-right">
              <el-button type="primary" @click="jump">图库分类</el-button>
            </div>
          </div>
          <!-- 分类 -->
          <div class="classify">
            <li
              v-for="item in categoryList_second"
              :key="item.id"
              :class="[item.id == category_id ? 'classfiy_selected' : '']"
              @click="handleCategory(item.id)"
            >
              {{ item.name }}
            </li>
          </div>
          <!-- 图片 -->
          <div class="image_box" v-if="categoryList_second.length > 0">
            <div class="image_box_inside">
              <div class="upload item" @click="switchUpload">
                <i class="el-icon-plus"></i>
                <p>上传图片</p>
              </div>
              <div
                class="item"
                v-for="item in list"
                :key="item.id"
                @mouseover="item.show = true"
                @mouseleave="item.show = false"
              >
                <div class="image" style="font-size: 0">
                  <el-image fit="fill" :src="item.img">
                    <div slot="error" class="image-slot">
                      <img :src="puzzleImg" />
                    </div>
                  </el-image>
                </div>
                <div class="image_mask" v-if="item.show">
                  <el-tooltip
                    class="item"
                    effect="dark"
                    :content="item.remark"
                    placement="top-start"
                  >
                    <div class="image_mask_main">
                      <i
                        class="el-icon-delete"
                        @click="handleDelete(item.id)"
                      ></i>
                    </div>
                  </el-tooltip>
                </div>
              </div>
            </div>
          </div>
          <div class="no_image_box" v-else>
            <p>注:请先前往图库分类下添加分类</p>
          </div>
          <div class="main_page boxdq">
            <div></div>
            <!-- 分页 -->
            <div class="main_page_r">
              <el-pagination
                :current-page="current.page"
                :page-sizes="[20, 30, 50, 100]"
                :page-size="limit"
                layout="total, sizes, prev, pager, next, jumper"
                :total="totalCount"
                background
                @size-change="changeLimit"
                @current-change="changePage"
              />
            </div>
          </div>
        </div>
      </div>
      <div>
        <!-- 添加记录 -->
        <el-dialog
          title="上传图片"
          :close-on-click-modal="false"
          :close-on-press-escape="false"
          :visible.sync="uploadVisible"
          class="main_dialog dialog550"
        >
          <el-form
            :inline="false"
            class="demo-form-inline"
            ref="addRecordListFrom"
            label-width="80px"
            :model="add_img_form"
            :rules="rules"
          >
            <el-form-item label="图片：" prop="img" style="margin-bottom: 30px">
              <el-upload
                class="avatar-uploader"
                :action="uploadPath"
                :data="{ store: 'online_img' }"
                :on-success="handSuccess"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove"
                :limit="1"
                list-type="picture-card"
                :file-list="filelist"
              >
                <div class="slot" slot="default">
                  <i class="el-icon-plus"></i>
                </div>
              </el-upload>
            </el-form-item>
            <el-form-item label="注释：" prop="remark">
              <el-input
                v-model="add_img_form.remark"
                placeholder="注释"
                clearable
                class="wid350"
              >
              </el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="uploadVisible = false">取 消</el-button>
            <el-button type="primary" @click="handleSave(1)" v-repeatClick
              >保 存</el-button
            >
            <el-button type="primary" @click="handleSave(2)" v-repeatClick
              >保存并继续上传</el-button
            >
          </div>
        </el-dialog>
        <el-dialog :visible.sync="dialogVisible" width="40%">
          <div class="imageshow">
            <img :src="dialogImageUrl" alt />
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import demo from "@/assets/demo_images/demo1.png";
import {
  get_categoryList,
  get_imgList,
  add_img,
  delete_img,
} from "@/api/global/globalDataManage";
import { apiUrl, objKeySort, Md5 } from "@/utils/public";
import { uploadPath, puzzleImg } from "@/api/currency";
import rules from "@/rules/global/globalDataMange";

export default {
  components: {},
  data() {
    return {
      uploadPath,
      puzzleImg,
      rules,
      activeName: "1",
      uploadVisible: false,
      listLoading: false,

      demo,
      // 分页
      current: {
        page: 1,
        size: 20,
      },
      limit: 20,
      totalCount: 0,
      list: [],
      // 分类
      categoryList_first: [
        {
          id: 1,
          name: "轮播图",
          pid: 0,
          selfNext: [],
        },
      ],
      categoryList_second: [{ id: 4, name: "轮播1", pid: 1, selfNext: [] }],
      title: "轮播图",
      category_id: 1,
      filelist: [],
      dialogImageUrl: "",
      dialogVisible: false,
      add_img_form: {
        img: "",
        category_id: "",
        remark: "",
      },
    };
  },
  created() {
    this.get_categoryList().then(() => {
      this.get_imgList();
    });
  },
  methods: {
    //获取在线图库分类
    get_categoryList() {
      this.listLoading = true;
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
          ),
        },
        apiUrl().name
      );
      return new Promise((resolve, reject) => {
        get_categoryList(data).then((res) => {
          if (res.errcode == 0) {
            this.categoryList_first = res.data;
            if (res.data[0].selfNext.length > 0) {
              this.category_id = res.data[0].selfNext[0].id;
            }

            this.categoryList_second = res.data[0].selfNext;
            resolve();
          } else {
            this.$message.error(res.errmsg);
            reject();
          }
        });
      });
    },
    // 获取图片列表
    get_imgList() {
      this.listLoading = true;
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
          ),
        },
        apiUrl().name,
        this.current,
        { category_id: this.category_id }
      );
      get_imgList(data).then((res) => {
        if (res.errcode == 0) {
          this.totalCount = res.data.count;
          res.data.list.map((e) => {
            e.show = false;
          });
          this.list = res.data.list;
          this.listLoading = false;
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },
    // 菜单栏
    handleClick(tab, event) {
      this.category_id = "";
      this.totalCount = 0;
      this.current.page = 1;
      this.current.size = 20;
      this.title = tab.label;
      let list = this.categoryList_first;
      list.map((e) => {
        if (e.id == this.activeName) {
          this.categoryList_second = e.selfNext;
          if (this.categoryList_second.length > 0) {
            this.category_id = this.categoryList_second[0].id;
          }
        }
      });
      this.$nextTick(() => {
        if (this.category_id) {
          this.get_imgList();
        }
      });
    },
    // 二级分类切换
    handleCategory(id) {
      this.category_id = id;
      this.current.page = 1;
      this.current.size = 20;
      this.get_imgList();
    },
    switchUpload() {
      this.uploadVisible = true;
    },
    // 上传图片-删除
    handleRemove(file) {},
    // 上传图片-查看
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    // 上传图片-成功
    handSuccess(res, file, fileList) {
      if (res.errcode != 0) {
        this.$message.error(res.errmsg);
        this.$message.error(res.errmsg);
      } else {
        this.add_img_form.img = res.data.path;
      }
    },
    // 上传图片弹窗
    uploadShow() {
      this.add_img_form.img = "";
      this.add_img_form.category_id = "";
      this.add_img_form.remark = "";
      this.filelist = [];
      this.uploadVisible = true;
    },
    // 保存
    handleSave(type) {
      this.$refs["addRecordListFrom"].validate((valid) => {
        if (valid) {
          switch (type) {
            case 1:
              this.saveImage();
              this.uploadVisible = false;
              break;
            case 2:
              this.saveImage();
              break;
          }
        }
      });
    },
    saveImage() {
      this.add_img_form.category_id = this.category_id;
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
          ),
        },
        apiUrl().name,
        this.add_img_form
      );
      return new Promise((resolve, reject) => {
        add_img(data).then((res) => {
          if (res.errcode == 0) {
            this.$message.success("添加成功");
            this.add_img_form.img = "";
            this.add_img_form.category_id = "";
            this.add_img_form.remark = "";
            this.filelist = [];
            this.get_imgList();
            resolve();
          } else {
            this.$message.error(res.errmsg);
            reject();
          }
        });
      });
    },
    // 删除图片
    handleDelete(id) {
      this.$confirm("确认删除活动图片?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let data = Object.assign(
            {
              sign: Md5(
                objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
              ),
            },
            apiUrl().name,
            { id: id }
          );
          delete_img(data).then((res) => {
            if (res.errcode == 0) {
              this.$message.success("删除成功");
              this.get_imgList();
            } else {
              this.$message.error(res.errmsg);
            }
          });
        })
        .catch(() => {});
    },
    jump() {
      this.$router.push({
        name: "document_datamange_classfiy",
      });
    },
    // 分页
    changeLimit(pageSize) {
      this.current.size = pageSize;
      this.get_imgList();
    },
    changePage(page) {
      this.current.page = page;
      this.get_imgList();
    },
    upload() {
      this.$emit("uploadShow");
    },
  },
};
</script>

<style lang="scss" scoped>
.main_ti {
  margin-bottom: 15px;
  padding-bottom: 1px;
  position: relative;
  /deep/.el-tabs__header {
    margin: 0;
  }
  /deep/.el-checkbox {
    margin-top: 12px;
  }
  &::after {
    height: 1px;
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: #e4e7ed;
    z-index: 1;
  }
  /deep/.el-tabs__nav-wrap::after {
    height: 0;
  }
}
.avatar-uploader {
  width: 150px;
  height: 120px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  .header-left {
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #333333;
  }
}
.classify {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  margin: 15px 0;
  li {
    margin-right: 20px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #848484;
    padding: 9px 18px;
    box-sizing: border-box;
    border: 1px solid rgba($color: #fff, $alpha: 0);
    cursor: pointer;
    &.classfiy_selected {
      border: 1px solid #0a8946;
      box-sizing: border-box;
      border-radius: 18px;
      color: #03a98e;
    }
  }
}
.image_box {
  .image_box_inside {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    flex-wrap: wrap;
    .upload {
      width: 200px !important;
      height: 130px;
      margin-right: 15px;
      margin-bottom: 15px;
      border: 1px solid #ccc;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .el-icon-plus {
        font-size: 36px;
        font-family: Microsoft YaHei;
        font-weight: 300;
        color: #797979;
      }
      p {
        font-size: 12px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #797979;
        margin-top: 10px;
      }
    }
    .item {
      margin-right: 15px;
      margin-bottom: 15px;
      position: relative;
      max-width: 346px;
      min-width: 60px;
      border-radius: 4px;
      .el-image {
        width: 100%;
      }
      .image_mask_main {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba($color: #000000, $alpha: 0.5);
        display: flex;
        align-items: center;
        justify-content: center;
        .el-icon-delete {
          font-size: 24px;
          color: #fff;
          font-weight: 400;
        }
      }
    }
  }
}
.imageshow {
  width: 100%;
  text-align: center;
}
.no_image_box {
  p {
    color: red;
    font-size: 18px;
  }
}
</style>